<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=3,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <!--<meta name="format-detection" content="telephone=yes">-->
    <title>维修订单详情</title>
    <link href="../css/reset-html5.css" rel="stylesheet">
    <link href="../css/mui.min.css" rel="stylesheet">
    <link href="../css/mui.picker.min.css" rel="stylesheet">
    <link href="../css/wx-main.css?20161028_1" rel="stylesheet">
    <script src="../js/jquery-2.2.1.min.js"></script>
    <script src="../plugins/vue/vue.min.js"></script>
    <style>
        .btn_{
            margin-top: 15px;
            margin-bottom: 15px;
            color: #ffffff;
            text-align: center;
            padding: 10px 0;
            border-radius: 10px;
            width: 90%;
            margin-left: 5%;
        }
        .hide{
            display: none;
        }

        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body id="main" v-cloak>
<header class="text-color1">
        <span class="left-btn text-color2" onclick="location.href='repair_order.html'">
            返回
        </span>
    订单详情
</header>
<!--售后服务start-->
<div class="mui-card" v-show="order_list.after_sale.status==1">
    <div class="mui-card-header primary-text">售后信息</div>
    <div class="mui-card-content">
        <div class="mui-card-content-inner">
            <p class="text-color3">
                问题描述：{{order_list.after_sale.info.message}}
            </p>
            <p class="text-color3">
                提交时间：{{order_list.after_sale.info.ctime | getLocalTime}}
            </p>

            <div class="primary-bg text-color2 btn_" id="confirmBtn5">确认解决</div>
        </div>
    </div>
</div>
<!--售后服务end-->

<div class="mui-card">
    <div class="mui-card-header primary-text">订单状态 <span style="float: right" v-show="order_list.status<=4 && order_list.status>0"><span id="confirmBtn3" class="text-color2" style="font-size: 12px">取消订单</span></span></div>
    <div class="mui-card-content">
        <div class="mui-card-content-inner">
            <p>订单编号：<span v-text="order_list.order_num"></span></p>
            <div class="text-center">
                <span class="circle-1" v-text="order_list.status | getStatus"></span>
                <p class="text-color3 pad" v-show="order_list.status==2">订单已指派，请尽快与用户联系并确认接单。</p>
                <p class="text-color3 pad" v-show="order_list.status==3">维修完成后请确认订单总价后<br/>点击“维修完成”按钮</p>
                <p class="text-color3 pad" v-show="order_list.status==4">若用户支付现金，<br/>请点击下方付款按钮，为用户线上垫付。</p>
                <p class="text-color3 pad" v-show="order_list.status==5">订单已完成，辛苦了！</p>
                <div class="primary-bg text-color2 btn_" id="confirmBtn1" v-show="order_list.status==2">确认接单</div>
                <div class="primary-bg text-color2 btn_" id="confirmBtn2" v-show="order_list.status==3">维修完成</div>
                <!--<div class="primary-bg text-color2 btn_" id="promptBtn" v-show="order_list.status==3">修改价格</div>-->
                <div class="primary-bg text-color2 btn_" id="confirmBtn4" v-show="order_list.status==4">代付款</div>
            </div>

        </div>
    </div>
    <div class="mui-card-footer primary-text" style="width: 100%;position: relative">
        订单总价：{{order_list.price}} 元 <span class="text-color2" style="position: absolute;right: 15px;top: 12px" id="promptBtn" v-show="order_list.status==3 || order_list.status==4">修改价格</span>
    </div>
</div>

<div class="mui-card">
    <div class="mui-card-header primary-text">联系信息</div>
    <div class="mui-card-content">
        <div class="mui-card-content-inner">
            <p><span style="visibility: hidden">地区</span>姓名：{{order_list.uname}}</p>
            <p v-if="order_list.fault_type==1">维修方式：<span class="primary-text">上门维修</span> </p>
            <p v-if="order_list.fault_type==2">维修方式：<span class="primary-text">到店维修</span> </p>
            <p>手机号码：<a v-bind:href="'tel:'+order_list.phone"><span v-text="order_list.phone"></span></a></p>

            <div v-if="order_list.fault_type==1">
                <p><span style="visibility: hidden">地区</span>地区：<span v-text="order_list.area_name"></span></p>
                <p>详细地址：<span v-text="order_list.address_info"></span></p>
                <p>上门时间：<span v-text="order_list.subscribe_time | getLocalTime"></span></p>
            </div>

            <p><span style="visibility: hidden">地区</span>备注：<span v-text="order_list.message"></span></p>
        </div>
    </div>
</div>

<div class="mui-card">
    <div class="mui-card-header primary-text">维修信息</div>
    <div class="mui-card-content">
        <div class="mui-card-content-inner">
            <p class="text-center primary-text" style="font-size: 16px" v-text="order_list.phone_name">

            </p>
            <p class="text-center text-color2" style="font-size: 12px" v-text="order_list.color+'，'+order_list.version">

            </p>

            <div class="border-1 pad8 text-center text-color2 mar-btm" v-for="li in order_list.data.fault_info">
                <span v-text="li.name"></span><span class="primary-text" v-text="'('+li.price+'元)'"></span>
            </div>
        </div>
    </div>
    <div class="mui-card-footer">
        订单费用预估：<span class="primary-text" v-text="order_list.price+'元'"></span>
    </div>
</div>

</body>
<script src="../js/mui.min.js"></script>
<script src="../js/base.js"></script>
<script src="../js/phone.js"></script>
<script src="js/public.js"></script>
<script src="layer_mobile/layer.js"></script>
<script>
    var payClick = false;//支付按钮
    document.getElementById("confirmBtn1").addEventListener('tap', function() {
        var btnArray = ['否', '是'];
        mui.confirm('是否确认接收订单？', '', btnArray, function(e) {
            if (e.index == 1) {
                vue.sure_order();
            } else {

            }
        })
    });

    document.getElementById("confirmBtn2").addEventListener('tap', function() {
        var btnArray = ['否', '是'];
        mui.confirm('是否确认已维修成功？', '', btnArray, function(e) {
            if (e.index == 1) {
                vue.sure_maintain();
            } else {

            }
        })
    });

    document.getElementById("confirmBtn3").addEventListener('tap', function() {
        var btnArray = ['否', '是'];
        mui.confirm('是否取消此订单？', '', btnArray, function(e) {
            if (e.index == 1) {
                vue.cancel_order();
            } else {

            }
        })
    });

    document.getElementById("confirmBtn5").addEventListener('tap', function() {
        var btnArray = ['否', '是'];
        mui.confirm('是否已经解决售后问题？', '', btnArray, function(e) {
            if (e.index == 1) {
                vue.sure_solve();
            } else {

            }
        })
    });

    /**
     * 修改价格
     */
    document.getElementById("promptBtn").addEventListener('tap', function (e) {
          location.href = 'alert_price.html?order_id='+getQueryString('order_id');
    });

    document.getElementById("confirmBtn4").addEventListener('tap', function() {
        if(!payClick){
            payClick = true;
            $('#confirmBtn4').text('付款中...');
            location.href = 'http://www.gojiw.com/wxpay/example/jsapi.php?order_id='+getQueryString('order_id')+'&type=2';
            localStorage.wx_pay_master = 1;
        }
    });

    var vue = new Vue({
        el:"#main",
        data:{
            order_list:''
        },
        methods:{
            'get_order_list':function(){
                var that = this;
				var index = layer.open({type: 2,shadeClose:false});
                $.post('../index/admin.php?m=Home&c=Index&a=getOrderInfo',{order_id:getQueryString('order_id')},function(res){
                    if(res.code==200){
                        that.order_list = res.data
                    }else if(res.code==0){
                        location.href = 'index.html?url='+ window.location.href;
                    }else{
                        alert(res.message);
                    }
                    layer.close(index);
                },'json');
            },
            'sure_order':function(id){
                var that = this;
				var index = layer.open({type: 2,shadeClose:false});
                $.post('../index/admin.php?m=Home&c=Index&a=checkGetOrder',{order_id:getQueryString('order_id')},function(res){
                    if(res.code==200){
                        that.get_order_list();
                    }else{
                        alert(res.message);
                    }
                    layer.close(index);
                },'json');
            },
            'sure_maintain':function(id){
                var that = this;
				var index = layer.open({type: 2,shadeClose:false});
                $.post('../index/admin.php?m=Home&c=Index&a=successOrder',{order_id:getQueryString('order_id')},function(res){
                    if(res.code==200){
                        that.get_order_list();
                    }else{
                        alert(res.message);
                    }
                    layer.close(index);
                },'json');
            },
            'cancel_order': function (id) {
                var that = this;
				var index = layer.open({type: 2,shadeClose:false});
                $.post('../index/admin.php?m=Home&c=Index&a=AdminDelOrder', {order_id: getQueryString('order_id')}, function (res) {
                    if (res.code == 200) {
                        that.get_order_list();
                    } else {
                        alert(res.message);
                    }
                    layer.close(index);
                }, 'json');
            },
            'alert_price':function(price){
                var that = this;
				var index = layer.open({type: 2,shadeClose:false});
                $.post('../index/admin.php?m=Home&c=Index&a=changeOrderPrice', {order_id: getQueryString('order_id'),price:price}, function (res) {
                    if (res.code == 200) {
                        that.get_order_list();
                    } else {
                        alert(res.message);
                    }
                    layer.close(index);
                }, 'json');
            },
            //确认解决
            'sure_solve':function(){
                var that = this;
				var index = layer.open({type: 2,shadeClose:false});
                $.post('../index/admin.php?m=Home&c=Index&a=after_sale_success', {order_id: getQueryString('order_id')}, function (res) {
                    if (res.code == 200) {
                        that.get_order_list();
                    } else {
                        alert(res.message);
                    }
                    layer.close(index);
                }, 'json');
            }
        },
        ready:function(){
            this.get_order_list();
        }
    });


    Date.prototype.Format = function(format) {
        var date = {
            "M+": this.getMonth() + 1,
            "d+": this.getDate(),
            "h+": this.getHours(),
            "m+": this.getMinutes(),
            "s+": this.getSeconds(),
            "q+": Math.floor((this.getMonth() + 3) / 3),
            "S+": this.getMilliseconds()
        };
        if (/(y+)/i.test(format)) {
            format = format.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length));
        }
        for (var k in date) {
            if (new RegExp("(" + k + ")").test(format)) {
                format = format.replace(RegExp.$1, RegExp.$1.length == 1
                        ? date[k] : ("00" + date[k]).substr(("" + date[k]).length));
            }
        }
        return format;
    };

    //将UTC格式转为正常的日期格式输出
    function getUTCTime(second) {
        var d = new Date();

        //转换毫秒
        d.setTime(second * 1000);

        return d.Format("yyyy-MM-dd hh:mm");
    }


    Vue.filter('getLocalTime', function (value) {
        return getUTCTime(value)
    });

    Vue.filter('getStatus', function (value) {
        return getStatus(value)
    });

    function getStatus(value){
        var status = '';
        switch(parseInt(value))
        {
            case -2:
                status = '已取消';
                break;
            case -1:
                status = '已取消';
                break;
            case 1:
                status = '已下单';
                break;
            case 2:
                status = '待接单';
                break;
            case 3:
                status = '待维修';
                break;
            case 4:
                status = '待付款';
                break;
            case 5:
                status = '已完成';
                break;
            case 6:
                status = '已完成';
                break;
        }
        return status;
    }

    function getQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]); return null;
    }
</script>
</html>